<template>
  <div class="top-search">
    <router-link to="/home">
      <div class="logo">
      <img src="../../images/logo.png" alt="">
    </div>
    </router-link>
    
    <div class="search" @click="emits('update:modelValue',true)">
      <!-- 插槽 -->
      <van-icon name="search" size="22" color="#999"/>
      <slot>
        <span>搜索</span>
      </slot>
    </div>
    <button class="open-app" @click="clickHandler">打开APP</button>
  </div>
</template>

<script setup lang="ts">
import {useRouter} from 'vue-router'
const router=useRouter();

const emits = defineEmits<{
  (e:'update:modelValue',v:boolean):void,
}>();

const clickHandler=()=>{
  router.push({
    name:'download'
  })
}



</script>

<style scoped lang="less">
.top-search{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  height: 50px;
  width: 355px;
  padding: 10px 10px 5px;
  background-color: #fff;
  z-index: 2;
  .logo{
    img{
      width: 80px;
    }
  }
  .search{
    display: flex;
    padding-left: 10px;
    align-items: center;
    color: #999;
    line-height: 34px;
    height: 34px;
    width: 170px;
    background-color: #eee;
    border-radius: 20px;
    span{
      margin-left: 8px;
    }
  }
  .open-app{
    width: 80px;
    height: 34px;
    padding: 8px 10px;
    border-radius: 17px;
    background-color: #fff;
    border:#f86442 1px solid;
    color: #f86442;
  }
}
</style>